<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="lib/css/layui.css" />
<script type="text/javascript" src="lib/layui/layui.js"></script>
</head>
<body>






	<form class="layui-form" action="" onsubmit="return false">


		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">请输入商品</label>
				<div class="layui-input-inline">
					<input type="text" id="p_name" name="p_name" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">价格:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="beginPrice" name="beginPrice"
						placeholder="￥" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="endPrice" name="endPrice" placeholder="￥"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">产品分类</label>
				<div class="layui-input-inline">
					<select id="p_categoryid" name="p_categoryid" lay-filter="aihao">
						<option value=""></option>
						<option value="1">休闲小吃</option>
						<option value="2">休闲饮品</option>

					</select>

				</div>
				<div class="layui-input-inline">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="demo1">搜索</button>
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="add">添加</button>

				</div>
			</div>


		</div>
	</form>

	<!-- 隐藏 -->
	<div id="div_product" style="display: none;">
		<form lay-filter="addprod" class="layui-form" action=""
			id="addproduct">
			<input type="hidden" name="p_id" id="p_id" />

			<div class="layui-form-item">
				<label class="layui-form-label">请输入名称:</label>
				<div class="layui-input-block">
					<input type="text" id="p_namee" name="p_namee" lay-verify="title"
						autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">起始价:</label>
				<div class="layui-input-block">
					<input type="text" name="p_price" id="p_price" lay-verify="title"
						autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">市场价:</label>
				<div class="layui-input-block">
					<input type="text" name="p_disprice" id="p_disprice"
						lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">图片:</label>
				<div class="layui-input-inline">
					<input type="text" name="p_img" id="p_img" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">口味:</label>
				<div class="layui-input-block">
					<input type="text" name="p_kouwei" id="p_kouwei" lay-verify="title"
						autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">库存:</label>
				<div class="layui-input-inline">
					<input type="text" name="p_kucun" id="p_kucun" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">品牌:</label>
					<div class="layui-input-inline">
						<input type="text" name="p_brand" id="p_brand" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">产地:</label>
					<div class="layui-input-inline">
						<input type="text" name="p_address" id="p_address"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">类型:</label>
					<div class="layui-input-inline">
						<input type="text" name="p_type" id="p_type" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">保质期:</label>
					<div class="layui-input-inline">
						<input type="text" name="p_baozhiqi" id="p_baozhiqi"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">产品分类:</label>
					<div class="layui-input-inline">
						<select id="p_categoryid" name="p_categoryid" lay-filter="aihao">
							<option value=""></option>
							<option value="1">休闲小吃</option>
							<option value="2">休闲饮品</option>

						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">是否上架:</label>
					<div class="layui-input-inline">
						<select id="p_canuse" name="p_canuse" lay-filter="aihao">
							<option value=""></option>
							<option value="1">上架</option>
							<option value="2">下架</option>

						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">上架时间:</label>
					<div class="layui-input-inline">
						<input type="text" name=p_onsaletime id="p_onsaletime"
							autocomplete="off" class="layui-input">
					</div>
				</div>





			</div>


			<div class="layui-form-item">
				<div class="layui-input-block">
					<button id="add_prod" type="submit" class="layui-btn" lay-submit=""
						lay-filter="add_prod">立即添加</button>

				</div>
			</div>
		</form>
	</div>

	<table id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
 
</script>
	<script> 
var table,form,layer,$;
layui.use(['table','form','layer'], function(){
 	 table = layui.table;
 	 form =layui.form;
 	 layer=layui.layer;
 	 $=layui.$;
  //第一个实例
  table.render({
    elem: '#demo'
   , id:'tableTab'
  
    ,url: '../getAll' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'p_id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'p_name', title: '名称'}
      ,{field: 'p_img', title: '图片' ,templet:'<div><img src="../img/{{d.p_img}}" /></div>'}
      ,{field: 'p_kucun', title: '库存'} 
      ,{field: 'p_brand', title: '品牌'}
      ,{field: 'p_address', title: '产地', sort: true}
      ,{templet:'<div>{{d.category.category_name}}</div>',  title: '分类名称'}
      ,{field: 'p_price', title: '价格'}
      ,{fixed: 'right',  align:'center', toolbar: '#barDemo',  title: '操作'} //这里的toolbar值是模板元素的选择器
    ]]
  });
//搜索
	 form.on('submit(demo1)',function(data){
	
	table.reload('tableTab',{
		  where:{
			  p_name: $("#p_name").val(),
			  p_categoryid: $("#p_categoryid").val(),
			  beginPrice: $("#beginPrice").val(),
			  endPrice: $("#endPrice").val()
		  } 
	  ,page: {
			    curr: 1 //重新从第 1 页开始
		  }
		});
		return false;  
	  
});
	form.on('submit(add)',function(){
		layer.open({
			type:1,
			content:$("#div_product"),
			area:['800px','600px']
		})
		
		return false;  
	  });
  form.on('submit(add_prod)',function(){
	$.post("../addprod",$("#addproduct").serialize(),function(res){
		 console.log(form);
		layer.msg(res.mag);
		if (res.code==="0") {
			layer.closeAll();
			table.reload("tableTab");
		}
	},"json")
		
		return false;  
	  });


//监听工具条 
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
    console.log(data);
      $("#add_prod").hide();
      form.val("addprod",data);
      layer.open({
		  type:1,
		  content:$("#div_product"),
		  area:['800px','600px']
	  });
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){ //编辑
    	$("#yincang").show();
		  form.val("m_form",data);//数据回显
		  layer.open({
				type : 1,
				content : $("#p_div"),
				area : [ '400px', '200px' ]
			});
    } 
  });

  
});
			

			
</script>
</body>
</html>